var CanvasRealtime = (function(window) {
  var CanvasRealtime = function(warpId, canvasId, imagePath) {
    return new CanvasRealtime.fn.init(warpId, canvasId, imagePath)
  }

  CanvasRealtime.fn = CanvasRealtime.prototype = {
    constructor: CanvasRealtime,
    init: function(warpId, canvasId, imagePath) {
      this.imgX = 0// 在画布上图片的X偏移量
      this.imgY = 0// 在画布上图片的Y偏移量
      this.imgScale = 1// 图片的缩放比例
      this.rateNum = 1// 图片高度自适应比例,图片等比居中展示在canvas
      this.scaleFlag = 0// 缩放因子，最大缩放9,最小缩放-9
      this.img = ''
      this.pos = {}// 每次拖拽前坐标保存
      this.dragFlag = false// 是否可拖拽当前img，默认不能

      this.wrap = document.getElementById(warpId)
      this.canvas = document.getElementById(canvasId)
      this.context = this.canvas.getContext('2d')
      this.imagePath = imagePath
    },
    loadImage: function() {
      if (this.imagePath) {
        this.canvas.height = this.wrap.offsetHeight
        this.canvas.width = this.wrap.offsetWidth
        this.img = new Image()
        let that = this
        this.img.onload = function() {
          var scale1=that.canvas.height / that.img.naturalHeight;
          var scale2=that.canvas.width / that.img.naturalWidth;
          that.imgScale = scale1>scale2?scale2:scale1;
          that.imgScale = that.imgScale*0.9;
          that.imgX = (that.canvas.width - that.img.naturalWidth * that.imgScale * that.rateNum) / 2// 默认进来当前图像剧中显示
          that.imgY = (that.canvas.height - that.img.naturalHeight * that.imgScale * that.rateNum) / 2// 默认进来当前图像剧中显示
          /* 画出当前图片 */
          that.drawImg()
        }
        this.img.src = this.imagePath
      }
    },
    drawImg: function() {
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
      this.context.drawImage(this.img, 0, 0, this.img.naturalWidth, this.img.naturalHeight, this.imgX, this.imgY, this.img.naturalWidth * this.imgScale * this.rateNum, this.img.naturalHeight * this.imgScale * this.rateNum)
    },
    drawPoint: function() {
    	// 画右下角标识
    	if(waconfigColorList){
    		let newPoint = this.getPoint( this.canvas.width-60, this.canvas.height-10)
    		for(var i=0;i<waconfigColorList.length;i++){
    			this.context.lineWidth = 1
    			this.context.font = '12px normal 宋体'// 设置字体
    		    this.context.fillStyle = waconfigColorList[i].label_color// 设置颜色
    			this.context.strokeStyle = waconfigColorList[i].label_color
    			this.context.strokeRect(newPoint.x, newPoint.y - ((i+1) * 25), 33, 22)
    			// this.context.fillRect(newPoint.x, newPoint.y - ((i+1) * 25),
				// 33, 22)
    			this.context.fillText(waconfigColorList[i].name, newPoint.x + 3, newPoint.y - (i * 25)-9)
    		}
    		this.context.lineWidth = 1
			this.context.font = '12px bold 宋体'// 设置字体
		    this.context.fillStyle = '#EEE'// 设置颜色
			this.context.fillText('↑', newPoint.x + 13, newPoint.y - (waconfigColorList.length * 25)-9)
    	}
      if (waMap && waconfigList.length) {
        for (let m = 0; m < waconfigList.length; m++) {
          let element = waconfigList[m]
          let pointData = this.getPointData(element)
          if(pointData){
        	  var value=pointData.value
        	  value=parseFloat(value);
        	  pointData.value=value.toFixed(2)
          }
          if (element.show_type == 2) {
            // 第一个点
            let newPoint1 = this.getNewPoint(element.point_label_lon, element.point_label_lat)
            this.context.strokeStyle = '#FFF'
            this.context.beginPath()
            this.context.arc(newPoint1.x, newPoint1.y, 2, 0, Math.PI * 2, true)
            this.context.stroke()// 画空心圆
            this.context.closePath()
            // 第二个点和线
            let newPoint2 = this.getNewPoint(element.line_wa_lon, element.line_wa_lat)
            this.context.strokeStyle = '#FFF'
            this.context.lineWidth = 1
            this.context.beginPath()
            this.context.moveTo(newPoint1.x, newPoint1.y)
            this.context.lineTo(newPoint2.x, newPoint2.y)
            this.context.fill()
            // this.context.setLineDash([2,1])
            this.context.stroke()
            this.context.closePath()

            this.context.strokeStyle = '#9C9C9C'
            if (element.line_side == 1) {
              this.context.strokeRect(newPoint2.x - element.show_width/2, newPoint2.y - (element.sort_no * 35), element.show_width, 30)
            } else {
              this.context.strokeRect(newPoint2.x - element.show_width/2, newPoint2.y + 5 + ((element.sort_no - 1) * 35), element.show_width, 30)
            }
            
            if (pointData) {
                if(pointData.alarm==1){
    	            var date=new Date();
    	            var second=date.getSeconds();
    	            var redFlag=second%2;
    	            if (element.line_side == 1&&redFlag==0) {
    	              this.context.rect(newPoint2.x - element.show_width/2, newPoint2.y - (element.sort_no * 35), element.show_width, 30)
    	              this.context.fillStyle='#FF7744'
    	              this.context.fill()
    	            } else if(element.line_side == 2 &&redFlag==0) {
    	              this.context.rect(newPoint2.x - element.show_width/2, newPoint2.y + 5 + ((element.sort_no - 1) * 35), element.show_width, 30)
    	              this.context.fillStyle='#FF7744'
    	              this.context.fill()
    	            }
                }
              // 数据
              this.context.font = '16px normal 黑体'// 设置字体
              this.context.fillStyle = element.label_color// 设置颜色
              var text=element.sort_no+"# "+pointData.value+element.unit;
              var textWidth=this.getTextWidth(text,this.context.font);
              if (element.line_side == 1) {
                this.context.fillText(pointData.orderNum+"# "+pointData.value+element.unit, newPoint2.x -textWidth/2, newPoint2.y - ((element.sort_no - 1) * 36) - 12)
              } else {
                this.context.fillText(pointData.orderNum+"# "+pointData.value+element.unit, newPoint2.x -textWidth/2, newPoint2.y + (element.sort_no * 35) - 8)
              }
            }
          } else if (element.show_type == 3) {
            if (pointData) {
              var chart = this.getMeterChart(m)
              if (chart) {
                chart.setMeterOption({
                  series: [{
                    data: [{
                      value: pointData.value,
                      name:element.elementname+'('+element.unit+')'
                    }]
                  }]
                })
              }
            }
          }else if (element.show_type == 4) {
              if (pointData) {
            	  var value=pointData.value
            	  value=parseInt(value);
            	  pointData.value=value
                 $("#"+element.code+"Value"+element.sort_no).text(pointData.value)
              }
          }
        }
      }
      // 更新零点曲线
      dynamicChart.setDynamicDatas(realtimeJsonData,'GF')
    },
    getPoint: function(x, y) {
      let obj = {}
      obj.x = x
      obj.y = y
      return obj
    },
    getNewPoint: function(x, y) {
      let obj = {}
      obj.x = x * this.imgScale + this.imgX
      obj.y = y * this.imgScale + this.imgY
      return obj
    },
    getPointData: function(element) {
      // 数据
      if (realtimeJsonData && realtimeJsonData.message && realtimeJsonData.message.data) {
        for (var i = 0; i < realtimeJsonData.message.data.length; i++) {
          if (element.code == realtimeJsonData.message.data[i].code && realtimeJsonData.message.data[i].orderNum == element.order_num) {
            return realtimeJsonData.message.data[i]
          }
        }
      }
    },
    getMeterChart: function(idx) {
      for (var i = 0; i < chartArr.length; i++) {
        if (chartArr[i].chartDom.id == 'meterChart' + idx) {
          return chartArr[i]
        }
      }
    },
    getTextWidth: function(text, font) {
      var canvas1 = this.getTextWidth.canvas1 || (this.getTextWidth.canvas1 = document.createElement("canvas"));
      var context1 = canvas1.getContext("2d"); 
      context1.font = font;
      var metrics = context1.measureText(text);
      return metrics.width;
    }
  }

  CanvasRealtime.fn.init.prototype = CanvasRealtime.fn
  return CanvasRealtime
})()
